{% extends base.html %}

{% block head %}

<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/5.41.0/codemirror.min.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/theme/monokai.min.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/theme/xq-light.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/addon/dialog/dialog.css">
<link rel="stylesheet" type="text/css" href="/static/lib/codemirror/addon/hint/show-hint.css">

<script type="text/javascript" src="/static/lib/codemirror/5.41.0/codemirror.min.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/clike/clike.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/shell.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/mode/markdown.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/keymap/sublime.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/addon/search/search.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/addon/search/searchcursor.js"></script>
<script type="text/javascript" src="/static/lib/codemirror/addon/dialog/dialog.js"></script>

<script src="/static/lib/codemirror/addon/hint/show-hint.js"></script>
<script src="/static/lib/codemirror/addon/hint/anyword-hint.js"></script>

<script type="text/javascript" src="/static/js/editor.js"></script>

{% if path.endswith(".py") %}
<script type="text/javascript" src="/static/lib/codemirror/mode/python.js"></script>
{% end %}
{% if path.endswith(".js") %}
<script type="text/javascript" src="/static/lib/codemirror/mode/javascript.js"></script>
{% end %}
{% if path.endswith(".php") %}
<script type="text/javascript" src="/static/lib/codemirror/mode/php.js"></script>
{% end %}
{% if path.endswith(".css") %}
<script type="text/javascript" src="/static/lib/codemirror/mode/css.min.js"></script>
{% end %}

<style type="text/css">
    .search-key {
        background-color: #FF8000;
        color: #000;
    }

    #result {
        border: 1px solid #ccc;
        padding: 4px;
        background-color: #eee;
    }

    #editorArea {
        border: 1px solid #ccc;
    }

    #editor {
        width: 100%;
        height: 100%;
    }

    .CodeMirror-search-match {
      background: gold;
      border-top: 1px solid orange;
      border-bottom: 1px solid orange;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      opacity: .5;
    }
</style>

{% end %}

{% block body %}
{% import os %}
{% init readonly = False %}
{% init warn = "" %}
{% init error = "" %}
{% init pathlist = [] %}
{% init show_preview = False %}
{% init embed = False %}

<div class="col-md-12 grid-card">
    {% include "mod_fs_path.html" %}

    {% if error != "" %}
    <div class="col-md-12 error">
        {{?error}}
    </div>
    {% end %}

    <form method="POST" action="/code/update">
        <input name="path" class="hide" value="{{path}}"/>
        <input name="basename" class="hide" value="{{os.path.basename(path)}}"/>
        <input name="dirname" class="hide" value="{{os.path.dirname(path)}}"/>
        <div id="editorArea" class="col-md-12">
            <textarea name="content" id="editor">{{content}}</textarea>
        </div>

        <div class="col-md-12 bottom-offset-1">
            {% if not readonly %}
                <input type="submit" value="保存">
                <input type="button" id="rename" class="btn rename-btn" value="重命名"/>
            {% end %}
            <input id="execute" type="button" class="btn hide" value="执行"/>
            {% if show_preview %}
                <a class="btn" href="/code/wiki/{{path}}?embed={{embed}}">{{T("Preview")}}</a>
            {% end %}
            {% if path.find("/plugins/") >= 0 or path.find("\\plugins\\") >= 0 %}
                <input type="button" class="link-btn" href="/plugins/{{plugin_name}}?embed={{embed}}" value="预览"/>
            {% end %}
            <span>注意不会自动保存</span>
        </div>

        <div id="resultDiv" class="col-md-12 hide">
            <div class="output-title">结果</div>
            <pre id="result" class="col-md-12 output-body">
            </pre>
        </div>
    </form>
</div>

{# TODO 需要处理下搜索的高亮 #}

<script type="text/javascript">
    $(function () {
        var editorHeight = adjustHeight("#editorArea", 50);
        $("#editorArea").css("overflow-y", "hidden");
        var editor = initCodeMirror("#editor", {
            filename: getUrlParams().path,
            height: editorHeight
        });
        window.codeEditor = editor;

        // 重命名
        $(".rename-btn").click(function (event) {
            var name     = $("[name=basename]").val();
            var dirname  = $("[name=dirname]").val();
            var new_name = prompt("重命名为", name);
            if (new_name) {
                $.post("/fs_api/rename", 
                    {dirname: dirname, old_name: name, new_name: new_name}, 
                    function (resp) {
                        if (resp.code == "success") {
                            var location = resp.location;
                            window.location.href = "/code/edit?path=" + dirname + "/" + new_name;
                        } else {
                            showErrorMessage("重命名失败, %s".format(resp.message));
                        }
                }).fail(function (e) {
                    console.log(e);
                    alert("重命名失败");
                });
            }
        });
    });
</script>
{% end %}